<template>
  <div class="dialog-wrapper">
    <Modal
      :title="title"
      width="540"
      footer-hide
      :value="value"
      :mask-closable="false"
      @on-cancel="handleCancel">
      <div class="dialog-main">
        <div class="btn-add">
          <Button type="primary" size="small" @click="handleAdd">新增</Button>
        </div>
        <Table
          border
          :columns="columns"
          :data="list"
          :loading="loading"
        ></Table>
      </div>
    </Modal>

    <Modal
      width="540"
      v-model="editModal"
      :title="title"
      footer-hide
      :mask-closable="false"
      @on-cancel="handleEditCancel"
    >
      <Form
        ref="editForm"
        :model="editForm"
        :rules="editRules"
        :label-width="90"
        >
          <FormItem label="导流渠道" prop="platformId">
            <Select
              class="search-col"
              placeholder="请选择导流渠道"
              v-model="editForm.platformId"
            >
              <Option v-for="(item, index) in platformList" :key="index" :value="item.id">
                {{ item.platformName }}
              </Option>
            </Select>
          </FormItem>
          <FormItem style="margin-top: 40px;">
            <Button type="error" @click="handleEditCancel()" style="margin-right: 5px;">取消</Button>
            <Button type="primary" @click="handleSubmit()">提交</Button>
          </FormItem>
        </Form>
    </Modal>
  </div>
</template>

<script>
  import qs from 'qs';
  export default {
    name: 'dialogChannel',
    props: {
      title: String,
      type: String,
      value: {
        type: Boolean,
        default: false
      },
      formData: {
        type: Object,
        default: {
          investorId: ''
        }
      }
    },
    data () {
      return {
        index: '',
        loading: true,
        list: [],
        columns: [
          { title: '渠道号', type: 'index', align: 'center' },
          { title: '渠道名称', key: 'platformName', align: 'center' },
          {
            title: '操作',
            align: 'center',
            render: (h, params) => {
              const { platformId } = params.row;
              return h('div', [
                h('Poptip', {
                  props: {
                    confirm: true,
                    title: '你确定要删除改渠道吗？',
                    placement: 'left',
                    transfer: true
                  },
                  on: {
                    'on-ok': () => {
                      this.handleRemove(platformId);
                    }
                  }
                }, [
                  h('Button', {
                    props: {
                      type: 'error',
                      size: 'small'
                    },
                    on: {
                      click: () => {
                        console.log('delete');
                      }
                    }
                  }, '删除')
                ])
              ]);
            }
          },
        ],
        editModal: false,
        editForm: {
          platformId: ''
        },
        platformList: [],
        editRules: { platformId: [ { required: true, type: 'number', message: '请选择导流渠道', trigger: 'change' } ] }
      }
    },
    watch: {
      value (newValue) {
        if (newValue) {
          this.handleChannel();
        }
      }
    },
    methods: {
      // 渠道配置
      handleChannel () {
        this.loading = true;
        this.$http.post('/helsinki/admin/investor/platformList', qs.stringify({
          investorId: this.formData.investorId
        })).then(({ data: { errcode, info, data } }) => {
          if (errcode == 0) {
            this.list = data.list;
            this.getAllInvestorList();
          }
          this.loading = false;
        }, error => {
          console.log(error);
        });
      },
      // 获取所有渠道名称
      getAllInvestorList () {
        this.$http.post('/helsinki/admin/daoliu/getAllPlatforms')
        .then(({ data: { errcode, info, data } }) => {
          if (errcode == 0) {
            this.platformList = data.list;
          }
        }, error => {
          console.log(error);
        });
      },
      // 添加直投客户渠道
      handleAdd () {
        // if (this.list.length > 4) return this.$Message.info('最多只能添加5个渠道');
        this.editForm.platformId = '';
        this.editModal = true;
      },
      // 弹出 cancel回调
      handleCancel () {
        this.$refs.editForm.resetFields();
        this.$emit('input', false);
      },
      // 提交事件
      handleSubmit () {
        this.$refs.editForm.validate(valid => {
          if (valid) {
            this.$http.post(`/helsinki/admin/investor/addPlatform`, qs.stringify({
              investorId: this.formData.investorId,
              platformId: this.editForm.platformId 
            })).then(({ data: { errcode, info, data } }) => {
              if (errcode === 0) {
                this.$Message.success('添加渠道成功');
                this.handleChannel();
                this.editModal = false;
              }
            }, error => {
              console.log(error);
            });
          }
        });
      },
      // 删除事件
      handleRemove (platformId) {
        this.$http.post(`/helsinki/admin/investor/delPlatform`, qs.stringify({
          investorId: this.formData.investorId,
          platformId: platformId
        })).then(({ data: { errcode, info, data } }) => {

          if (errcode === 0) {
            this.$Message.success('删除渠道成功');
            this.handleChannel();
            this.editModal = false;
          }
        }, error => {
          console.log(error);
        });
      },
      // 编辑弹窗 取消事件
      handleEditCancel () {
        this.$refs.editForm.resetFields();
        this.editModal = false;
      }
    }
  }
</script>

<style lang="scss" scoped>
  .dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .btn-add {
    margin-bottom: 15px;
    text-align: right;
  }
</style>
